<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的文件</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.content-container .layui-table-cell{
			height: inherit;
    		line-height: inherit;
    		max-height: 120px;
		}
		.layui-table-body.layui-table-main tr .layui-table-cell{
			height: 130px;
   		    line-height: unset;
		}
		.image-list .item{	
		    height: 130px;		
		    margin: 0px;
		}
		.image-list .item .image-card{
			height: 62px;
		}
		.image-list .item img{
		    max-height: 80px;	
    		max-width: 108px;
		}
		.webuploader-pick{
		    height: 98px!important;
		    background: #f8f8f8 url(./../static/images/upload.png) center 18px no-repeat!important;
		}
		.image-list .layui-icon-delete{	
			position: relative;
    		bottom: -20px;
		}
		.image-container{
			margin-left: 0px;
		}	
	</style>
</head>
<body class="body-container">
			
	<!-- table表格数据 -->
	<div class="content-container">
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>
	<script type="text/html" id="layuiTableToolbar">
  		<div class="layui-btn-container">
    				
  		</div>
	</script>
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script th:inline="javascript">
		var file_service_location_val;	
		$(document).ready(function() {		
			file_service_location_val = [[${file_service_location}]];		
			console.log(file_service_location_val);
		})
		
		// table
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            ,url:'/sysUserFile/selectPageList'
	          	//,toolbar: '#layuiTableToolbar'		
				//,height:720
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [
	            	[
            		{ type: 'numbers', title: '序号' }		
            		,{field:'fileNumber',width:290,  title: '用户信息',templet: 
	            		function(res){	
	            			var html = "";
	            			html+='<p style="font-size: 17px;margin-top: 5px;">编号： '+res.fileNumber+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 5px;">手机： '+res.phone+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 5px;">性别： '+res.gender+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 5px;">卖家： ';
	            			html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs look-main-user-info-btn">'+res.nickname+'</button>';
	            			html+='</p>';
	           				return html;	
	            		}
	            	}
            		,{field:'fileUrl',width:160, title: '文件预览', templet: 
	                	function(res){	
	            			var html = '';
	            			html+='<div class="image-container">';
	            			html+='<ul class="image-list">';
	            			html+='<li class="item">';
	            			html+='<div class="img-title mian">120 * 100</div>';
	            				
	            			html+='<div class="image-card image-sort'+res.id+'">';
	            			if(res.fileUrl){		            				
	        					if(res.contentType=="video/mp4"){	
	        						html+='<video style="width: 100%;  height: 100%;" src="'+res.fileUrl+'" controls="controls">您的浏览器不支持 video 标签。</video>';
	        					}else{
	        						html+='<img class="picture-preview-btn" alt="url" src="'+res.fileUrl+'">';
	        					}	
	            			}else{
	            				html+='<div id="fileList" class="uploader-list"></div>';	
	        					html+='<div class="wb-file-pickers" image-sort="1" product-id='+res.id+' onchange="webUploadsOnchange(\''+res.id+'\')"></div>';	
	            			}
	            			html+='</div>';		
	            			
	            			html+='<div class="image-tools image-sort1">';
	        				
	        				html+='</div>';
	            			html+='</li>';
	            			
	            			// 更多	            			
	            			html+='<li class="" style="margin-top: 2px; float: left; margin-left: 5px;">';
	            			html+='</li>';
	            			
	            			html+='</ul>';
	            			html+='</div>';
	            			return html;
	            			
	                	}
	            	}
	            	,{field:'fileNumber', title: '文件信息',templet: 
	            		function(res){	
	            			var html = "";
	            			html+='<p style="font-size: 17px;margin-top: 5px;">大小： '+res.fileSize+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 5px;">来源： '+res.fileSource+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 5px;">类型： '+res.fileType+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 5px;">地址： '+res.fileUrl+'</p>';
	           				return html;	
	            		}
	            	}
	           	    ,{field:'dataSource',width:120, title: '数据来源'}
	            	,{field:'fileStatus',width:120, title: '文件状态'}
	            	,{field:'createTime',width:220, title: '时间', templet:
	                	function(res){
	            			var html = "";
	            			html+='<p>创建： '+commonDateFormat(res.createTime,"yyyy-MM-dd hh:mm:ss")+' </p>';
	            			html+='<p>修改： '+commonDateFormat(res.updateTime,"yyyy-MM-dd hh:mm:ss")+' </p>';
	           				return html;	
	            		}
	                }
	                ,{field:'right',title: '操作',width:140, templet: 
	                	function(res){		
	               			return '<p>详情</p>';	
	                	}
	                }	
	            ]
	            ]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	
	            }
	        });  
    	});
		
	</script>
</body>
</html>